<template>
	<view v-for="(item, index) in list" class="list" :key="index">
		<view class="badge" v-if="item.state == 0"></view>
		<view class="list_right2">
			<view class="title">
				<image class="l_img" :src="item.fromHeadUrl"></image>
				<view class="center">
					<view>
						<text>{{ item.title }}</text>
						<!-- 						xxx 在 <text>纪念馆</text> 点亮了 <text>操作</text> -->
					</view>
					<view style="display: flex">
						<view class="time">{{ formatTimestamp(item.createdAt) }}</view>
						<view class="time" style="padding-left: 24rpx" v-if="item.giftDeadline">
							{{ item.giftDeadline }}
						</view>
					</view>
				</view>
			</view>
			<image class="r_img" src="http://112.124.50.179:8888/imgs/home/tixing.png"></image>
		</view>
	</view>
</template>

<script setup>
import { defineProps } from 'vue';
import { formatTimestamp } from '@/utils/time.js';
let props = defineProps(['list']);

</script>

<style lang="scss">
.list {
	background-color: #292b2a;
	border-radius: 10rpx;
	display: flex;
	padding: 32rpx;
	margin-bottom: 24rpx;
	position: relative;
}

.badge {
	position: absolute;
	width: 20rpx;
	height: 20rpx;
	background-color: #ff4c5a;
	border-radius: 50%;
	right: 0rpx;
	top: 0rpx;
}

.list_right2 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.l_img {
		width: 88rpx;
		height: 88rpx;
		margin-right: 24rpx;
		border-radius: 50%;
	}

	.r_img {
		width: 80rpx;
		height: 80rpx;
	}

	.title {
		font-size: 28rpx;
		color: #fff;
		margin-bottom: 16rpx;
		display: flex;

		.center {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		view {
			text {
				color: #f3e0bb;
			}
		}
	}

	.time {
		font-size: 24rpx;
		color: #999999;
	}
}
</style>
